<template>
	<view class="cardBg">
		<u--form labelWidth='80' labelPosition="left" :model="device">
			<u-form-item label="设备名称">
				<u--input v-model="device.name" border="none" placeholder="请输入设备名称"></u--input>
			</u-form-item>
			<u-form-item label="设备位置">
				<u--input v-model="device.address" border="none" placeholder="请输入设备位置"></u--input>
			</u-form-item>
			<u-form-item label="设备序列号">
				<u--input v-model="device.deviceNumber" border="none" placeholder="请输入设备序列号"></u--input>
			</u-form-item>
			<u-form-item label="所属类型">
				<u--input disabled disabledColor="#fff" v-model="device.product" border="none" placeholder="请选择所属类型">
				</u--input>
				<u-icon slot="right" name="arrow-right" @click="showProduct = true"></u-icon>
			</u-form-item>
			<u-form-item label="数据模板">
				<u--input disabled disabledColor="#fff" v-model="device.template" border="none" placeholder="请选择数据模板">
				</u--input>
				<u-icon slot="right" name="arrow-right" @click="showTemplate = true"></u-icon>
			</u-form-item>

			<u-form-item label="协议">
				<u-radio-group v-model="device.proto" placement="row">
					<u-radio style="margin-right: 6px;" :customStyle="{marginBottom: '8px'}"
						v-for="(item, index) in protolist" :key="index" :label="item.label" :name="item.label">
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<block v-if="device.proto === 'modbus-rtu'">
				<u-form-item label="通讯地址">
					<u--input v-model="device.addr" border="none" placeholder="请输入设备通信地址"></u--input>
				</u-form-item>
				<u-form-item label="波特率">
					<u--input disabled disabledColor="#fff" v-model="device.baudrate" border="none"
						placeholder="请选择波特率"></u--input>
					<u-icon slot="right" name="arrow-right" @click="selectQuerey('baudrate')"></u-icon>
				</u-form-item>
				<u-form-item label="数据位">
					<u--input disabled disabledColor="#fff" v-model="device.databits" border="none"
						placeholder="请选择数据位"></u--input>
					<u-icon slot="right" name="arrow-right" @click="selectQuerey('databits')"></u-icon>
				</u-form-item>
				<u-form-item label="奇偶校验">
					<u--input disabled disabledColor="#fff" v-model="device.parity" border="none" placeholder="请选择奇偶校验">
					</u--input>
					<u-icon slot="right" name="arrow-right" @click="selectQuerey('parity')"></u-icon>
				</u-form-item>
				<u-form-item label="停止位">
					<u--input disabled disabledColor="#fff" v-model="device.stopbits" border="none"
						placeholder="请选择停止位"></u--input>
					<u-icon slot="right" name="arrow-right" @click="selectQuerey('stopbits')"></u-icon>
				</u-form-item>
			</block>
			<block v-else>
				<u-form-item label="IP地址">
					<u--input v-model="device.ip" border="none" placeholder="请输入设备IP地址"></u--input>
				</u-form-item>
				<u-form-item label="子网掩码">
					<u--input v-model="device.mask" border="none" placeholder="请输入子网掩码"></u--input>
				</u-form-item>
				<u-form-item label="网关地址">
					<u--input v-model="device.gateway" border="none" placeholder="请输入网关地址"></u--input>
				</u-form-item>
				<u-form-item label="端口">
					<u--input disabled disabledColor="#fff" v-model="device.port" border="none" placeholder="">
					</u--input>
				</u-form-item>
			</block>
			<u-form-item label="描述">
				<u--input v-model="device.desc" border="none" placeholder="请输入设备描述"></u--input>
			</u-form-item>
		</u--form>
		<view class="button">
			<u-button type="primary" text="确定" @click="addDevice()"></u-button>
		</view>
		<u-action-sheet :closeOnClickOverlay="true" :closeOnClickAction="true" :show="showProduct"
			:actions="productOptions" title="请选择产品类型" @close="showProduct = false" @select="productSelect">
		</u-action-sheet>
		<u-action-sheet :show="showTemplate" :actions="templateOptions" title="请选择数据模板" @close="showTemplate = false"
			@select="templateSelect">
		</u-action-sheet>
		<u-action-sheet :show="showQuery" :actions="queryOptions" title="请选择" @close="showQuery = false"
			@select="querySelect">
		</u-action-sheet>
	</view>
</template>

<script>
	import {
		getLocation
	} from '@/utils/getlocation.js'
	export default {
		data() {
			return {
				addshow: false,
				loading: true,
				show: false,
				productList: [],
				showProduct: false,
				showTemplate: false,
				showQuery: false,
				queryOptions: [],
				productOptions: [],
				templateOptions: [],
				protolist: [{
						value: "modbus-rtu",
						label: "modbus-rtu",
					},
					{
						value: "modbus-tcp",
						label: "modbus-tcp",
					},
				],
				baudOptions: [{
						value: 9600,
						name: '9600',
					},
					{
						value: 14400,
						name: '14400',
					},
					{
						value: 19200,
						name: '19200',
					},
					{
						value: 38400,
						name: '38400',
					},
					{
						value: 57600,
						name: '57600',
					},
					{
						value: 115200,
						name: '115200',
					},
				],
				dataBitsOptions: [{
						value: 5,
						name: '5',
					},
					{
						value: 6,
						name: '6',
					},
					{
						value: 7,
						name: '7',
					},
					{
						value: 8,
						name: '8',
					},
				],
				parityOptions: [{
						value: 'N',
						name: 'N',
					},
					{
						value: 'O',
						name: 'O',
					},
					{
						value: 'E',
						name: 'E',
					},
				],
				stopBitsOptions: [{
						value: 1,
						name: '1',
					},
					{
						value: 2,
						name: '2',
					},
				],
				device: {
					name: '',
					address: '',
					template: '',
					templateId: '',
					deviceNumber: '',
					product: '',
					productId: '',
					desc: '',
					proto: "modbus-rtu",
					addr: '',
					baudrate: '',
					databits: '',
					parity: '',
					stopbits: '',

					ip: '',
					mask: '',
					gateway: '',
					port: 502
				},
			}
		},
		computed: {

		},
		onReady() {},
		onLoad() {
			this.getProduct()
			this.getTemplate()
		},
		methods: {
			selectQuerey(type) {
				this.showQuery = true
				if (type === 'baudrate') {
					this.queryOptions = this.baudOptions
				} else if (type === 'databits') {
					this.queryOptions = this.dataBitsOptions
				} else if (type === 'parity') {
					this.queryOptions = this.parityOptions
				} else if (type === 'stopbits') {
					this.queryOptions = this.stopBitsOptions
				}
			},
			querySelect(e) {
				if (this.baudOptions.some(item => item.value === e.value)) {
					this.device.baudrate = e.value
				} else if (this.dataBitsOptions.some(item => item.value === e.value)) {
					this.device.databits = e.value
				} else if (this.parityOptions.some(item => item.value === e.value)) {
					this.device.parity = e.value
				} else if (this.stopBitsOptions.some(item => item.value === e.value)) {
					this.device.stopbits = e.value
				}
			},
			templateSelect(e) {
				this.device.template = e.name
				this.device.templateId = e.value
			},
			productSelect(e) {
				this.device.product = e.name
				this.device.productId = e.value
			},
			close() {
				this.addshow = false
			},

			async getTemplate() {
				const db = uniCloud.database()
				const res = await db.collection('temp').get()
				this.templateOptions = res.result.data.map(item => {
					return {
						name: item.name,
						value: item._id
					}
				})
			},
			async getProduct() {
				const db = uniCloud.database()
				const res = await db.collection('products').get()
				this.productOptions = res.result.data.map(item => {
					return {
						name: item.productName,
						value: item._id
					}
				})
			},
			async addDevice() {
				if (!this.device.name) return uni.$u.toast('请输入设备名称')
				if (!this.device.address) return uni.$u.toast('请输入设备地址')
				if (!this.device.deviceNumber) return uni.$u.toast('请输入设备序列号')
				if (!this.device.product) return uni.$u.toast('请选择设备所属类型')
				if (!this.device.template) return uni.$u.toast('请选择设数据模板')
				if (!this.device.proto) return uni.$u.toast('请选择设协议')
				if (this.device.proto === 'modbus-rtu') {
					if (!this.device.addr) return uni.$u.toast('请输入设备通讯地址')
					if (!this.device.baudrate) return uni.$u.toast('请选择设备波特率')
					if (!this.device.databits) return uni.$u.toast('请选择设备数据位')
					if (!this.device.parity) return uni.$u.toast('请选择设备奇偶检验')
					if (!this.device.stopbits) return uni.$u.toast('请选择设备停止位')
				} else {
					if (!this.device.ip) return uni.$u.toast('请输入设备ip地址')
					if (!this.device.mask) return uni.$u.toast('请输入设备子网掩码')
					if (!this.device.gateway) return uni.$u.toast('请输入网关地址')
				}
				let update = {}
				const common = {
					createTime: Date.now(),
					bindStatus: 0,
					longitude: 108.946871,
					latitude: 34.276121,
					resourceImg: [
						'https://mp-779f4133-ea71-4a67-b4af-8cecfd13e8e1.cdn.bspapp.com/051.jpg',
						'https://mp-779f4133-ea71-4a67-b4af-8cecfd13e8e1.cdn.bspapp.com/062.jpg'
					],
					name: this.device.name,
					address: this.device.address,
					template: this.device.template,
					templateId: this.device.templateId,
					deviceNumber: this.device.deviceNumber,
					product: this.device.product,
					productId: this.device.productId,
					desc: this.device.desc,
					proto: this.device.proto
				}
				if (this.device.proto === 'modbus-rtu') {
					update.addr = Number(this.device.addr)
					update.baudrate = this.device.baudrate
					update.databits = this.device.databits
					update.parity = this.device.parity
					update.stopbits = this.device.stopbits
				} else {
					update.ip = this.device.ip
					update.mask = this.device.mask
					update.gateway = this.device.gateway
					update.port = this.device.port
				}
				uni.showLoading({
					title: '添加中...'
				});
				const db = uniCloud.database()
				const result = await db.collection('res').add({
					...common,
					...update
				})
				await uni.$u.toast('添加成功')
				await uni.hideLoading();
				this.device = {}
				uni.switchTab({
					url: '/pages/device/device',
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
</style>
